<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">

    <link rel="stylesheet" type="text/css" href="__CSS__/base.css">
    <link rel="stylesheet" type="text/css" href="__CSS__/home.css?2222283">
    <link rel="stylesheet" type="text/css" href="__CSS__/dropload.css">

    <script src="__JS__/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="__JS__/reset.js"></script>
    <script type="text/javascript" src="__JS__/dropload.js"></script>
    <script type="text/javascript" src="__JS__/clipboard.js"></script>
    <title>海报大厅</title>
</head>

<body>
    <div class="wrap">
      <!-- 显示图片 -->
      <div class="showImgDetail" style="display:none">
        <div class="showImg_con">
          <i class="iconfont close" id="close_img">&#xe602;</i>
          <div class="img_wrap">
            <p class="title">长按图片保存海报</p>
            <img class="imgs" src="" alt="">
          </div>
          <div class="gg" id="bar"></div>
          <div class="down">
            <button class="btn_down" onclick="" data-clipboard-action="copy" data-clipboard-target="#bar">点击复制广告语</button>
          </div>
        </div>
      </div>
      <!-- <div class="header">
        <div class="header_title">海报大厅</div>
      </div> -->
      <!-- 内容 -->
      <div class="main">
        <ul class="list" id="content">
            {volist name="consumeArr" id="consumeArr"}
            <li class="item" onclick="showImg({$consumeArr.id})">
              <img class="item_img" src="{$consumeArr.qr_code_path}" alt="">
                <p class="item_money"><strong>奖励:<span style="color: #f82a2a">{$consumeArr.price/100}</span>元</strong></p>
            </li>
            {/volist}
        </ul>
      </div>

      <!-- 底部 -->
      <div class="footer">
        <ul class="footer_list">
          <li class="footer_item">
            <i class="iconfont icon active">&#xe65d;</i>
            <p class="title active">海报大厅</p>
          </li>
          <li class="footer_item" id="toTx">
            <i class="iconfont icon ">&#xe608;</i>
            <p class="title">提现</p>
          </li>
          <li class="footer_item" id="toMy">
            <i class="iconfont icon">&#xe601;</i>
            <p class="title">我的</p>
          </li>
        </ul>
      </div>

     {if condition="$userInfo.first_login==0"}
      <!-- 新手导航 -->
      <div class="layer">
        <div class="layer_con">
           <span class="close">&times;</span>
           <div class="title">是否阅读新手教程?</div>
           <div class="btn_group">
              <a href="#" class="cancel">我是老手不需要</a>
              <a href="{:url('user/help')}" class="sure">查看新手教程</a>
           </div>
        </div>
      </div>
        {/if}
        {if condition="$showQrcode==0"}
         <!-- 公众号弹框 -->
        <div class="right_open">
          <p>官方</p>
        </div>
      <div class="public_layer" style="display:none;">
        <div class="con_wrap">
          <div class="public_close">&times;</div>
          <div class="content">
            <p class="con_tit">防止入口丢失</p>
            <img class="imgs" src="__IMG__/qrcode.jpg" alt="">
            <p class="con_tit">请先扫码关注官方公众号</p>
        </div>
        </div>
      </div>
        {/if}
    </div>
<script>
  let page = 1;  //加载页面
  $(function(){
        let height =  $(window).height() - $('.footer').height();
        $('.main').css('height',height+'px');
        $('.main').dropload({
              /* 上拉加载 */
              loadDownFn: function(me){
                  $.post("",{page:page},function(data){
                    console.log(data);
                    if(data == '404' || data.length <= 0){
                      me.noData();
                    }
                      let str = '';
                      for(var i in data){
                          str+= '<li class="item" onclick="showImg('+data[i]['id']+')">'+
                              '<img class="item_img" src="'+data[i]['qr_code_path']+'" alt="">'+
                              '<p class="item_money"><strong>奖励:<span style="color: #f82a2a">'+(data[i]['price']/100)+'</span>元</strong></p>'+
                              '</li>';
                      }
                      me.resetload();
                      $(".main .list").append(str);
                      page++;
                  })
                }/*,
              /!* 下拉刷新 *!/
              loadUpFn: function(me){

                  let str = '<li class="item" onclick="showImg(this)">'+
                              '<img class="item_img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539774221081&di=be5f47dc044e9da562b1e2a9ddf0dbf0&imgtype=0&src=http%3A%2F%2Fpic38.nipic.com%2F20140302%2F9352546_213533724000_2.jpg" alt="">'+
                              '<p class="item_money">3048元</p>'+
                            '</li>';
                  $(".main .list").html(str);
                  console.log(me);
                  me.resetload();
              },*/
        });
})
    </script>
    <script>
       //显示缩略图
      function showImg(id){
        
        $.ajax({
          url:"{:url('home/getConsumeById')}",
          data:{id:id},
          type: 'post',
          async: false,
          success:(data)=>{
            var arr=JSON.parse(data);
            if(arr.code==404) {
                alert(arr.msg);
            }else {
              let imgsrc = arr.url;
              $('.showImg_con .imgs').attr('src', imgsrc);
              $('.showImg_con .gg').html(arr.slogan);
              $('.showImgDetail').show();
            }
          },
          error:function(err){
            console.log(err)
          }
        })
        
      }
      $(function(){
        // 关闭图片详情
        $('#close_img').click(()=>{
          $('.showImgDetail').hide();
        })
        // 新手导航弹框
        let layer = $('.layer');
        $('.layer .close,.layer .cancel').click(()=>{
          layer.hide();
        })
      })
      // button的class的值
      var clipboard = new Clipboard('.btn_down');
        clipboard.on('success', function(e) {
           alert('复制成功');
        });

        clipboard.on('error', function(e) {
          console.log(e);
        });

        // 关注公众号弹框
        $('.public_layer .public_close').click(()=>{
          $('.public_layer').hide();
        })
        $('.right_open').click(()=>{
          $('.public_layer').show();
        })
    </script>
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?952d0061effe2f7ae4c8cff93c4b0afd";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>

</body>
</html>